import React, { Component } from 'react'
import { connect } from 'react-redux'
import { validForm as validFormDuck } from 'ducks'
import { Table, Form, Dropdown } from 'semantic-ui-react'
import Styled from 'styled-components'
import { BasicButton, PrimaryButton } from 'components/Button'
import { Query } from 'react-apollo'
import produce from 'immer'

const SectionRow = Styled.div`
  margin-bottom: 1em;
`
class DatasetConfig extends Component {
  static propTypes = {}

  componentDidMount = () => {
    const { actionInitField, name, required } = this.props
    actionInitField({
      name,
      state: 'init',
      required,
      query: '',
    })
  }

  mergeQuery = (others, query) => produce(others, (draftState) => {
    if (!query || query === '') {
      draftState.value = '% %'
    } else {
      draftState.value = `%${query}%`
    }
  })

  render() {
    const {
      header, 
      description, 
      actionInitField, 
      field, 
      submit, 
      query, 
      actionSearchInputChange, 
      actionSearchSelectChange, 
      name,
      ...others,
    } = this.props
    return (
      <Table.Row>
        <Table.Cell width="4" verticalAlign="top">
          {header}
        </Table.Cell>
        <Table.Cell>
          <SectionRow>{description}</SectionRow>
          <SectionRow>
            <Form>
              {field && (
                <Query query={query.query} variables={this.mergeQuery(query.variables, field.query)} fetchPolicy="network-only">
                {({ loading, error, data }) => {
                  if (error) return `Error! ${error.message}`
                  return (
                    <Form.Field inline>
                  <Dropdown
                    style={{ maxWidth: '300px' }}
                    placeholder="Select Friend"
                    fluid
                    search
                    selection
                    options={loading? [] : query.getData(data)}
                    onSearchChange={(e,{searchQuery})=>actionSearchInputChange(name,searchQuery)}
                    onChange={(e,{value})=>actionSearchSelectChange(name,value)}
                    loading={loading}
                    disabled={loading}
                  />
                </Form.Field>
                  )
                }}
              </Query>
              )}
            </Form>
          </SectionRow>
          {submit && (
            <SectionRow>
              <BasicButton content="取消" />
              <PrimaryButton content="保存" primary />
            </SectionRow>
          )}
        </Table.Cell>
      </Table.Row>
    )
  }
}

const mapStateToProps = (state, ownProps) => ({
  field: validFormDuck.selectors.field(state, ownProps.name),
})

const mapDispatchToProps = {
  actionInitField: validFormDuck.creators.actionInitField,
  actionSearchInputChange: validFormDuck.creators.actionSearchInputChange,
  actionSearchSelectChange: validFormDuck.creators.actionSearchSelectChange,
}

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(DatasetConfig)
